/* ---------------------------------------------------------
INDEX 
--------------------------------------------------------- */
/*
    1. CSS Custom Properties (Theme Variables)
    2. Global Resets and Base Styles
    3. Blazor Error UI
    4. Public UI Root
    5. Layout Containers
    6. Buttons and Links
    7. Page Transitions
    8. Public Header
    9. Navigation Links
   10. Public Footer
   11. Legal Document Styles
   . Mobile Menu
   . Responsive Design (Media Queries)
   . Accessibility & Focus States
*/

/* ---------------------------------------------------------
   1. CSS Custom Properties (Theme Variables)
--------------------------------------------------------- */

:root {
    /* Brand Colors */
    --brand-primary: #009cbd;
    --brand-primary-dark: #007a94;
    --brand-primary-light: #00b8de;
    /* Neutrals */
    --color-text: #111827;
    --color-text-muted: #6B7280;
    --color-border: rgba(0, 0, 0, 0.06);
    --color-bg: #ffffff;
    --color-bg-alt: #F1F5F9;
    /* Spacing */
    --header-height: 72px;
    --container-max-width: 1400px;
    --container-padding: 16px;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 28px rgba(0, 156, 189, 0.35);
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
}

/* Suppress native browser password reveal button */
.auth input[type="password"]::-ms-reveal,
.auth input[type="password"]::-ms-clear,
.auth input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none;
}

/* ---------------------------------------------------------
   2. Global Resets and Base Styles
--------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    overflow-y: scroll; /* Prevent layout shift when scrollbar appears */
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   3. Blazor Error UI
--------------------------------------------------------- */

#blazor-error-ui {
    background: #fff3cd;
    border-top: 2px solid #ffc107;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    font-size: 0.9rem;
    color: #856404;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
        color: #856404;
        opacity: 0.7;
        transition: opacity var(--transition-fast);
    }

        #blazor-error-ui .dismiss:hover {
            opacity: 1;
        }

/* ---------------------------------------------------------
   4. Public UI Root
--------------------------------------------------------- */

.public-ui {
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-layout {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--color-text);
}

/* ---------------------------------------------------------
   5. Layout Containers
--------------------------------------------------------- */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.public-main {
    flex: 1;
    padding: 48px 0;
    max-width: var(--container-max-width);
    margin: 0 auto;
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ---------------------------------------------------------
   6. Buttons and Links
--------------------------------------------------------- */

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-primary);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    position: relative;
    display: inline-block;
}

    .link-button::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 1px;
        background: var(--brand-primary);
        opacity: 0;
        transform: scaleX(0.8);
        transition: all var(--transition-base);
    }

    .link-button:hover::after,
    .link-button:focus::after {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Focus states for accessibility */
    .link-button:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
        border-radius: 2px;
    }

.form-error {
    background: #fdecea;
    color: #721c24;
    list-style: none;
    text-align: center;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid #c82333;
    margin: 16px 0;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------
   7. Page Transitions
--------------------------------------------------------- */

.page-transition {
    animation: pageFadeIn 180ms ease-out;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------
   8. Public Header
--------------------------------------------------------- */

.public-header {
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
    font-family: 'Josefin Sans', 'Inter', system-ui, sans-serif;
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(to bottom, #F1F5F9 0%, #EEF2F7 100%);
    transition: box-shadow var(--transition-base);
}

/* Fallback for browsers without backdrop-filter support — both resolve to the same dark background */
@supports not (backdrop-filter: blur(6px)) {
    .public-header {
        background: #0e1c2f;
    }
}

@supports (backdrop-filter: blur(6px)) {
    .public-header {
        background: #0e1c2f;
        backdrop-filter: none;
    }
}

.public-header.scrolled {
    box-shadow: var(--shadow-md);
}

/* Header Content Structure */
.public-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-signin {
    text-decoration: none;
    color: var(--brand-primary);
    font-size: 0.95rem;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
}

    .header-signin:hover {
        opacity: 1;
    }

    .header-signin::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 1px;
        background: var(--brand-primary);
        opacity: 0;
        transform: scaleX(0.8);
        transition: all var(--transition-base);
    }

    .header-signin:hover::after,
    .header-signin:focus-visible::after {
        opacity: 1;
        transform: scaleX(1);
    }

    .header-signin:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
        border-radius: 2px;
    }

.header-register {
    background: var(--brand-primary);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(0, 156, 189, 0.25);
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
    display: inline-block;
}

    .header-register:hover {
        background: var(--brand-primary-dark);
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

    .header-register:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
    }

    .header-register:active {
        transform: translateY(0);
    }

/* Logo Styles */
.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

    .logo-link:hover {
        opacity: 0.85;
    }

    .logo-link:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
        border-radius: 4px;
    }

.logo-image {
    height: 50px;
    width: auto;
    display: block;
}

.logo-text {
    font-family: 'Equinox', 'Josefin Sans', sans-serif;
    font-size: 1.25rem;
    color: var(--brand-primary);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------
   9. Navigation Links
--------------------------------------------------------- */

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .nav-links a {
        text-decoration: none;
        color: var(--color-text);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 500;
        position: relative;
        transition: color var(--transition-base);
    }

        .nav-links a:hover {
            color: var(--brand-primary);
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 1px;
            background: var(--brand-primary);
            opacity: 0;
            transform: scaleX(0.8);
            transition: all var(--transition-base);
        }

        .nav-links a:hover::after,
        .nav-links a:focus-visible::after {
            opacity: 1;
            transform: scaleX(1);
        }

        .nav-links a:focus-visible {
            outline: 2px solid var(--brand-primary);
            outline-offset: 4px;
            border-radius: 2px;
        }

/* ---------------------------------------------------------
   10. Public Footer
--------------------------------------------------------- */

.public-footer {
    background-color: var(--color-bg-alt);
    font-family: 'Josefin Sans', 'Inter', system-ui, sans-serif;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.footer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 48px var(--container-padding);
    display: flex;
    justify-content: space-between;
    gap: 48px;
}

.footer-brand {
    flex-shrink: 0;
}

.footer-logo {
    height: 100px;
    width: auto;
}

.footer-links {
    display: flex;
    gap: 64px;
    flex-wrap: wrap;
}

.footer-column {
    min-width: 150px;
}

    .footer-column h4 {
        font-size: 1rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 12px;
        margin-top: 0;
        color: var(--color-text);
        font-weight: 600;
    }

    .footer-column a {
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        color: var(--color-text-muted);
        font-size: 0.9rem;
        margin-bottom: 8px;
        transition: color var(--transition-base);
    }

        .footer-column a:hover {
            color: var(--brand-primary);
        }

        .footer-column a:focus-visible {
            outline: 2px solid var(--brand-primary);
            outline-offset: 2px;
            border-radius: 2px;
        }

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px var(--container-padding);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------------------------------------------------------
   11. Legal Document Styles
--------------------------------------------------------- */
.legal-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px;
}

/* Table of Contents - sticky sidebar */
.legal-toc {
    position: sticky;
    top: 100px;
    align-self: start;
    background: var(--color-bg-alt);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.legal-toc-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

.legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .legal-toc-list li {
        margin-bottom: 8px;
    }

    .legal-toc-list a {
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color var(--transition-base);
        display: block;
        padding: 4px 0;
    }

        .legal-toc-list a:hover {
            color: var(--brand-primary);
        }

    .legal-toc-list button {
        background: none;
        border: none;
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color var(--transition-base);
        display: block;
        padding: 4px 0;
        cursor: pointer;
        text-align: left;
        width: 100%;
        font-family: inherit;
    }

        .legal-toc-list button:hover {
            color: var(--brand-primary);
        }

        .legal-toc-list button:focus-visible {
            outline: 2px solid var(--brand-primary);
            outline-offset: 2px;
            border-radius: 2px;
        }

/* Main content area */
.legal-body {
    min-width: 0; /* Prevent grid blowout */
}

.legal-title {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--color-text);
}

.legal-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
}

/* Sections */
.section {
    margin-bottom: 48px;
    scroll-margin-top: 120px; /* Adjust this value to match your header height + some padding */
}

    .section h2 {
        font-size: 1.5rem;
        margin-top: 0;
        margin-bottom: 16px;
        color: var(--color-text);
    }

    .section h3 {
        font-size: 1.2rem;
        margin-top: 24px;
        margin-bottom: 12px;
        color: var(--color-text);
    }

    .section p {
        line-height: 1.7;
        margin-bottom: 16px;
        color: var(--color-text);
    }

    .section ul {
        line-height: 1.7;
        margin-bottom: 16px;
        padding-left: 24px;
    }

    .section li {
        margin-bottom: 8px;
    }

/* Legal table — used in Data Retention section */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.95rem;
    color: var(--color-text);
}

    .legal-table th,
    .legal-table td {
        text-align: left;
        padding: 10px 14px;
        border: 1px solid var(--color-border);
        vertical-align: top;
        line-height: 1.6;
    }

    .legal-table th {
        background-color: var(--color-bg-subtle, #f5f5f5);
        font-weight: 600;
    }

    .legal-table tr:nth-child(even) td {
        background-color: var(--color-bg-subtle, #f9f9f9);
    }

/* Pending legal review flag */
.legal-review-flag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 156, 189, 0.3);
    transition: all var(--transition-fast);
    z-index: 50;
}

    .back-to-top:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 156, 189, 0.4);
    }

/* Mobile: Hide TOC sidebar, show simple top nav */
@media (max-width: 768px) {
    .legal-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .legal-toc {
        position: relative;
        top: 0;
        max-height: none;
    }

    .legal-toc-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .back-to-top {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px;
        font-size: 0.85rem;
    }
}

/* ---------------------------------------------------------
   . Mobile Menu
--------------------------------------------------------- */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
}

    .menu-toggle:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 4px;
        border-radius: 4px;
    }

/* Mobile menu actions - hidden on desktop */
.mobile-menu-actions {
    display: none;
}

/* ---------------------------------------------------------
   . Responsive Design (Media Queries)
--------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --container-padding: 12px;
    }

    /* Mobile Header - Show menu toggle */
    .menu-toggle {
        display: block;
        order: 3;
        margin-left: auto;
    }

    .logo-link {
        order: 1;
    }

    /* Hide desktop nav and actions */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, #F1F5F9 0%, #EEF2F7 100%);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 8px;
        z-index: 50;
    }

        .nav-links.open {
            display: flex;
        }

        .nav-links a {
            padding: 12px 0;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

            .nav-links a:last-of-type {
                border-bottom: none;
            }

    .header-actions {
        display: none;
    }

    /* Mobile menu actions */
    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid var(--color-border);
    }

    .header-signin-mobile,
    .header-register-mobile {
        width: 100%;
        text-align: center;
        padding: 12px;
        text-decoration: none;
    }

    .header-signin-mobile {
        color: var(--brand-primary);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    .header-register-mobile {
        background: var(--brand-primary);
        color: white;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    /* Mobile Footer */
    .footer-container {
        flex-direction: column;
        padding: 32px var(--container-padding);
        gap: 32px;
    }

    .footer-links {
        gap: 32px;
    }

    .footer-logo {
        height: 80px;
    }

    /* Mobile Main Content */
    .public-main {
        padding: 32px 0;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 1.1rem;
    }

    .logo-image {
        height: 40px;
    }

    .footer-links {
        flex-direction: column;
        gap: 24px;
    }

    .header-actions {
        gap: 8px;
    }
}

/* ---------------------------------------------------------
   . Accessibility & Focus States
--------------------------------------------------------- */

/* Ensure all interactive elements have visible focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(0, 0, 0, 0.2);
    }
}